<template>
  <div class="box">
    <div class="btn-box">
      <el-button :type="activeBtnText == '资产数据总量分析' ? 'primary' : 'default'" @click="activeBtnText = '资产数据总量分析'">
        资产数据总量分析</el-button>
      <el-button :type="activeBtnText == '结构化数据资产分析' ? 'primary' : 'default'" @click="activeBtnText = '结构化数据资产分析'">
        结构化数据资产分析</el-button>
      <el-button :type="activeBtnText == '外部数据资产分析' ? 'primary' : 'default'" @click="activeBtnText = '外部数据资产分析'">
        外部数据资产分析</el-button>
      <el-button :type="activeBtnText == '非结构化数据资产分析' ? 'primary' : 'default'" @click="activeBtnText = '非结构化数据资产分析'">
        非结构化数据资产分析</el-button>
      <el-button :type="activeBtnText == '资产数量变化趋势分析' ? 'primary' : 'default'" @click="activeBtnText = '资产数量变化趋势分析'">
        资产数量变化趋势分析</el-button>
      <el-button :type="activeBtnText == '资产存储占用趋势分析' ? 'primary' : 'default'" @click="activeBtnText = '资产存储占用趋势分析'">
        资产存储占用趋势分析</el-button>
    </div>
    <div style="display: flex;width: 100%;">
      <div id="" v-if="activeBtnText == '非结构化数据资产分析'" style="width: 10%;">
        <el-tree :data="data" :default-expand-all="true" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div style="width: 90%;">
        <div v-if="activeBtnText == '资产存储占用趋势分析'">
          <el-form ref="ruleForm" :model="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row>
              <el-col :span="7">
                <el-form-item label="存放区域">
                  <el-select v-model="ruleForm.pid" placeholder="请选择">
                    <el-option v-for="(item,index) in orgList" :key="index" :label="item.fullName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="维保">
                  <el-select v-model="ruleForm.pid1" placeholder="请选择">
                    <el-option v-for="(item,index) in orgList1" :key="index" :label="item.fullName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="状态">
                  <el-select v-model="ruleForm.pid2" placeholder="请选择">
                    <el-option v-for="(item,index) in orgList2" :key="index" :label="item.fullName" :value="item.id" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activeBtnText == '资产数量变化趋势分析'" style="display: flex;margin-bottom: 30px;">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
          <el-button type="primary">查询</el-button>
          <div style="display: flex;align-items: center;">
            <div id="" style="width: 100px;margin-left: 10px;">出库数量:</div>
            <el-input placeholder="请输入内容" v-model="input" :disabled="true">
            </el-input>
          </div>
          <div style="display: flex;align-items: center;">
            <div id="" style="width: 100px;margin-left: 10px;">金额总计:</div>
            <el-input placeholder="请输入内容" v-model="input1" :disabled="true">
            </el-input>
          </div>
        </div>
        <el-table v-if="activeBtnText == '资产数据总量分析'" :data="tableData" border fit stripe highlight-current-row>
          <el-table-column v-for="item in tableHead(activeBtnText)" :key="item.id" :label="item.label"
            :prop="item.title" align="center" />
        </el-table>
        <el-table v-else :data="newTableData()" border fit stripe highlight-current-row>
          <el-table-column v-for="item in tableHead(activeBtnText)" :key="item.id" :label="item.label"
            :prop="item.title" align="center" />
        </el-table>
      </div>
    </div>
    <div class="current-box" v-if="activeBtnText == '资产数据总量分析'">
      <el-pagination :current-page="currentPage" :page-sizes="[10, 30, 50, 100]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeBtnText: "资产数据总量分析",
        tableData: [],
        currentPage: 1, // 当前页数
        totalCount: 100, // 数据总量
        pageSize: 10,
        ruleForm: {
          fullName: '',
          pid: 1,
          remark: '',
          pid1: 1,
          pid2: 1
        },
        input: 0,
        input1: 0,
        value1: '',
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        orgList: [{
            id: 1,
            fullName: '全部'
          },
          {
            id: 2,
            fullName: '办公室'
          },
        ],
        orgList1: [{
            id: 1,
            fullName: '全部'
          },
          {
            id: 2,
            fullName: '在保'
          },
        ],
        orgList2: [{
            id: 1,
            fullName: '全部'
          },
          {
            id: 2,
            fullName: '闲置'
          },
          {
            id: 3,
            fullName: '借用'
          },
          {
            id: 4,
            fullName: '调拨中'
          },
          {
            id: 5,
            fullName: '在用'
          },
          {
            id: 6,
            fullName: '停用'
          },
          {
            id: 7,
            fullName: '维修中'
          },
        ],
        data: [{
          label: 'IT设备',
          children: [{
              label: '服务器',
              children: [{
                  label: 'X86'
                },
                {
                  label: '小型机'
                },
                {
                  label: '应用均衡'
                },
                {
                  label: 'centos'
                }
              ]
            },
            {
              label: '光纤交换机',
              children: [{
                label: '光纤交换机'
              }]
            },
            {
              label: '安全设备',
              children: [{
                  label: '加密机'
                },
                {
                  label: '核验机'
                },
                {
                  label: '入侵检测'
                },
                {
                  label: '防火墙'
                },
                {
                  label: '网络加密机'
                },
                {
                  label: '堡垒机'
                },
                {
                  label: '入侵防护'
                },
                {
                  label: '安全审计'
                },
              ]
            },
          ]
        }],
      };
    },
    created() {
      this.getAssetPageList()
    },
    computed: {},
    methods: {
      getAssetPageList() {
        this.$server.getAssetPageList({
          page: this.currentPage,
          limit: this.pageSize
        }).then((res) => {
          console.log(res)
          this.totalCount = res.page.totalCount
          this.tableData = res.page.list
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage = val;
      },
      handleNodeClick(data) {
        console.log(data);
      },
      newTableData() {
        let news = []
        switch (this.activeBtnText) {
          case "结构化数据资产分析":
            news = [{
              Category: "资产分类",
              type: "办公用品/办公电脑/笔记本电脑",
              idle: 0,
              borrow: 0,
              Using: 0,
              Deactivate: 0,
              scrapped: 0,
              Transferring: 0,
              maintenance: 0
            }]
            break;
          default:
            news = []
            break;
        }
        return news
      },
      tableHead(item) {
        let newHead = null;
        switch (item) {
          case "资产数据总量分析":
            newHead = [{
                id: 1,
                label: "资产编号",
                title: "number",
              },
              {
                id: 2,
                label: "资产状态",
                title: "status",
              },
              {
                id: 3,
                label: "资产类别",
                title: "type",
              },
              {
                id: 4,
                label: "资产名称",
                title: "specification",
              },
              {
                id: 5,
                label: "规格型号",
                title: "name",
              },
              {
                id: 6,
                label: "其他编号",
                title: "otherNumber",
              },
              {
                id: 7,
                label: "序列",
                title: "sequence",
              },
              {
                id: 8,
                label: "来源",
                title: "source",
              },
              {
                id: 9,
                label: "供应商",
                title: "provider",
              },
              {
                id: 10,
                label: "品牌",
                title: "brand",
              },
              {
                id: 11,
                label: "计量单位",
                title: "jobDesc",
              },
              {
                id: 13,
                label: "所属公司",
                title: "company",
              },
              {
                id: 14,
                label: "使用部门",
                title: "dept",
              },
              {
                id: 15,
                label: "使用人",
                title: "user",
              },
              {
                id: 16,
                label: "使用年限",
                title: "durableYears",
              },
              {
                id: 17,
                label: "采购日期",
                title: "buyDate",
              },
            ];
            break;
          case "结构化数据资产分析":
            newHead = [{
                id: 1,
                label: "类目",
                title: 'Category'
              },
              {
                id: 2,
                label: "分类",
                title: 'type'
              },
              {
                id: 3,
                label: "闲置",
                title: 'idle'
              },
              {
                id: 4,
                label: "借用",
                title: 'borrow'
              },
              {
                id: 5,
                label: "在用",
                title: 'Using'
              },
              {
                id: 6,
                label: "停用",
                title: 'Deactivate'
              },
              {
                id: 7,
                label: "报废",
                title: 'scrapped'
              },
              {
                id: 8,
                label: "调拨中",
                title: 'Transferring'
              },
              {
                id: 9,
                label: "维修中",
                title: 'maintenance'
              }
            ]
            break;
          case "外部数据资产分析":
            newHead = [{
                id: 1,
                label: "资产名称",
                title: "assetName"
              },
              {
                id: 2,
                label: "领用部门",
                title: "Department"
              },
              {
                id: 3,
                label: "领用人",
                title: "man"
              },
              {
                id: 4,
                label: "仓库",
                title: "storehouse"
              },
              {
                id: 5,
                label: "领用时间",
                title: "time"
              },
            ];
            break;
          case "非结构化数据资产分析":
            newHead = [{
                id: 1,
                label: "资产编号",
                title: 'Category'
              },
              {
                id: 3,
                label: "资产类别",
                title: 'idle'
              },
              {
                id: 4,
                label: "资产名称",
                title: 'borrow'
              },
              {
                id: 5,
                label: "规格型号",
                title: 'Using'
              },
              {
                id: 6,
                label: "其他编号",
                title: 'Deactivate'
              },
              {
                id: 8,
                label: "来源",
                title: 'Transferring'
              },
              {
                id: 10,
                label: "品牌",
                title: 'borrow'
              },
              {
                id: 11,
                label: "计量单位",
                title: 'Using'
              },
              {
                id: 12,
                label: "配置描述",
                title: 'Deactivate'
              },
              {
                id: 13,
                label: "所属公司",
                title: 'scrapped'
              },
              {
                id: 14,
                label: "使用部门",
                title: 'Transferring'
              },
              {
                id: 15,
                label: "使用人",
                title: 'maintenance'
              },
              {
                id: 16,
                label: "存放区域",
                title: 'Using'
              },
              {
                id: 19,
                label: "使用部门",
                title: 'Transferring'
              },
              {
                id: 20,
                label: "使用人",
                title: 'maintenance'
              }
            ]
            break;
          case "资产数量变化趋势分析":
            newHead = [{
                id: 13,
                label: "资产名称",
                title: 'scrapped'
              },
              {
                id: 14,
                label: "资产价格",
                title: 'Transferring'
              },
              {
                id: 15,
                label: "领用部门",
                title: 'maintenance'
              },
              {
                id: 16,
                label: "领用人",
                title: 'Using'
              },
              {
                id: 19,
                label: "仓库",
                title: 'Transferring'
              },
              {
                id: 20,
                label: "领用时间",
                title: 'maintenance'
              }
            ];
            break;
          case "资产存储占用趋势分析":
            newHead = [{
                id: 1,
                label: "资产编号",
                title: 'Category'
              },
              {
                id: 3,
                label: "资产类别",
                title: 'idle'
              },
              {
                id: 4,
                label: "资产名称",
                title: 'borrow'
              },
              {
                id: 5,
                label: "规格型号",
                title: 'Using'
              },
              {
                id: 6,
                label: "其他编号",
                title: 'Deactivate'
              },
              {
                id: 8,
                label: "来源",
                title: 'Transferring'
              },
              {
                id: 10,
                label: "品牌",
                title: 'borrow'
              },
              {
                id: 11,
                label: "计量单位",
                title: 'Using'
              },
              {
                id: 12,
                label: "配置描述",
                title: 'Deactivate'
              },
              {
                id: 13,
                label: "所属公司",
                title: 'scrapped'
              },
              {
                id: 14,
                label: "使用部门",
                title: 'Transferring'
              },
              {
                id: 15,
                label: "使用人",
                title: 'maintenance'
              },
              {
                id: 16,
                label: "存放区域",
                title: 'Using'
              },
              {
                id: 19,
                label: "使用部门",
                title: 'Transferring'
              },
              {
                id: 20,
                label: "使用人",
                title: 'maintenance'
              }
            ];
            break;
          default:
            newHead = [];
            break;
        }
        return newHead;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }

  .btn-box {
    margin-bottom: 30px;
  }

  .current-box {
    width: 100%;
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
  }
</style>
